<style lang="scss" scoped>
@import "@/assets/css/variable";
.vanPopup {
  box-sizing: border-box;
  background-color: #ffdb89;
  .gift_pop {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    background-color: white;
    position: relative;
    padding: 2rem 0;
    background-color: #ffdb89;
    .close-icon {
      position: fixed;
      width: 2.4rem;
      height: 2.4rem;
      right: 0.7rem;
      bottom: 55%;
      border-radius: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }
  .coupons {
  margin: 2.5rem 0 1rem 0;
  width: 90%;
  background-color: #fff;
  border-radius: 8px;
  padding: 1.5rem 1rem 1rem;
  box-sizing: border-box;
  position: relative;
  .title {
    width: 12rem;
    height: 3rem;
    background: var(--btn_color);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    line-height: 3rem;
    text-align: center;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: 0.3rem;
    font-size: 1.4rem;
    span {
      display: inline-block;
      width: 1rem;
      height: 1rem;
      border-radius: 1rem;
      background-color: #ffdb89;
    }
    span:nth-child(1) {
      margin-right: 0.5rem;
    }
    span:nth-child(2) {
      margin-left: 0.2rem;
    }
    .triangle_left_border {
      width: 0;
      height: 0;
      border-bottom: 1.5rem solid var(--btn_color);
      border-left: 1.5rem solid transparent;
      position: absolute;
      left: 0%;
      top: 0%;
      margin-left: -1.5rem;
    }
    .triangle_right_border {
      width: 0;
      height: 0;
      border-bottom: 1.5rem solid var(--btn_color);
      border-right: 1.5rem solid transparent;
      position: absolute;
      left: 100%;
      top: 0%;
    }
  }

  .gift_pop1 {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    background-color: white;
    position: relative;
    padding: 2rem 0;

    .conter1 {
        box-sizing: border-box;
        display: flex;
        // height: 10rem;
        // border: 1px solid #979797;
        padding: 0 1rem;
        // margin: 1rem 0 0;s
        .text2 {
          // color: #ffdb89;
          line-height: 2.4rem;
          p {
          }
        }
      }
  }
}
  }
}
</style>

<template :style="{'--btn_color': btn_color , '--theme_color': theme_color}">
  <div>
    <van-popup
    class="vanPopup"
    v-model="protocolShow"
    position="bottom"
    :style="{ height: '60%' }"
    round
  >
    <div class="gift_pop">
      <span
        class="close-icon"
        :style="{ backgroundColor: btn_color }"
        @click="iconClick"
        ><van-icon color="white" name="cross"
      /></span>
      <div class="coupons" :style="{ '--btn_color': btn_color }">
        <div class="title">
          <span></span>
          <div>用户协议</div>
          <span></span>
          <div class="triangle_left_border"></div>
          <div class="triangle_right_border"></div>
        </div>

        <div class="gift_pop1">
          <vm-scrollbar tag="div" :wrapStyle="{ height: height+'px' }">
            <div class="conter1">
              <div class="text2" v-html="protocolText"></div>
            </div>
          </vm-scrollbar>
        </div>
      </div>
    </div>
  </van-popup>
  </div>
</template> 
<script>
// import VueUeditorWrap from 'vue-ueditor-wrap';
import { Popup } from "vant";
//注册子组件


export default {
  name: "protocol-text",
  components: {
    [Popup.name]: Popup,
  },
  props: {
    protocolShow: Boolean,
    theme_color: String,
    btn_color: String
  },
  computed: {},
  data() {
    return {
      protocolText: '',
      height: null
    };
  },
  created() {
    this.getItemagreement()
  },
  mounted() {
    this.height= document.documentElement.clientHeight*0.4
  },
  methods: {
    getItemagreement() {
      this.$request.getItemagreement().then(res => {
       this.protocolText = res.data.value.agreement_describe
      })
    },
    iconClick() {
      this.$emit("iconClick");
    },
  },
};
</script>